<template>
  <el-dialog :visible.sync="visible" title="停用" :close-on-click-modal="false" @opened="handleOpened" @closed="handleClosed">
    <div>
      <el-form ref="form" :model="formData" :rules="formRules" label-width="120px">
        <el-form-item key="discontinuationReason" prop="discontinuationReason" label="停用原因">
          <c-dict-select v-model="formData.discontinuationReason" dict-type-code="CTM_MARKET_DISABLE_TYPE" clearable placeholder="停用原因" style="width:100%" />
        </el-form-item>
        <el-form-item key="discontinuationRemark" prop="discontinuationRemark" label="停用说明">
          <el-input v-model="formData.discontinuationRemark" type="textarea" show-word-limit maxlength="1024" :autosize="{minRows: 4}" placeholder="停用说明" clearable />
        </el-form-item>
        <template v-if="formData.discontinuationReason === 'A'">
          <el-form-item key="associatedMarketCode" prop="associatedMarketCode" label="对应有效市场">
            <c-common-search
              v-model="formData.associatedMarketCode"
              url="/slm-ctm/api/v1/ctmMarketTask/page"
              method="POST"
              value-key="marketCode"
              label-key="marketName"
              query-key="marketName"
              query-position="filtersRaw"
              :format-label="v=>`${v.marketName}(${v.marketCode})`"
              :columns="[
                {
                  prop: 'marketCode',
                  label: '编码'
                },
                {
                  prop: 'marketName',
                  label: '名称'
                }
              ]"
              :label.sync="formData.associatedMarketName"
              :filters-raw="[
                { 'id': 'enable', 'property': 'enable', 'value': '1', 'operator': '=' },
                { 'id': 'marketCode', 'property': 'marketCode', 'value': seletedData.marketCode, 'operator': '<>' }
              ]"
              :before-params="paramsJson=>{
                this.$codeOrName(paramsJson.filtersRaw, 'marketCode', 'marketName')
                return paramsJson
              }"
            />
          </el-form-item>
          <el-form-item key="associatedMarketName" prop="associatedMarketName" label="对应有效市场编码">
            <span>{{ formData.associatedMarketCode }}</span>
          </el-form-item>
        </template>
      </el-form>
      <div class="btn-end">
        <c-button type="default" @click="handleCancel">取消</c-button>
        <c-button type="primary" @click="handleConfirm">确定</c-button>
      </div>
    </div>
  </el-dialog>

</template>
<script>
import { disabledTask } from '@/api/channelTask2/storeUpgradeTask'
export default {
  name: 'Disabled',
  props: {
  },
  data() {
    return {
      visible: false,
      formData: {
        discontinuationReason: '',
        discontinuationRemark: '',
        associatedMarketCode: '',
        associatedMarketName: ''
      },
      seletedData: {}
    }
  },
  computed: {
    formRules() {
      return {
        discontinuationReason: [{ required: true, message: '请选择停用原因', trigger: 'change' }],
        discontinuationRemark: [{ required: true, message: '请输入停用说明', trigger: 'change' }],
        associatedMarketCode: [{ required: this.formData.discontinuationReason === 'A', message: '请选择对应有效市场', trigger: 'change' }]
      }
    }
  },
  methods: {
    handleOpened() {
    },
    handleClosed() {
      this.seletedData = {}
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.resetFields()
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    openDialog(row) {
      this.seletedData = row
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    handleConfirm() {
      return this.$refs.form.validate().then(() => {
        const data = { ...this.formData }
        data.marketId = this.seletedData.id
        delete data.associatedMarketName
        if (this.formData.discontinuationReason !== 'A') {
          delete data.associatedMarketCode
        }
        return disabledTask(data).then(res => {
          this.$message.success('操作成功')
          this.visible = false
          this.$emit('on-success')
        })
      })
    }
  }
}
</script>
